<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    年: <input type="text" id="year">
    月: <input type="text" id="month">
    日: <input type="text" id="day">
    <button id="btn">判断</button>
    <input type="text" id="result">
</body>
<script>
    // 2. 年月日输入计算  (n = 前n-1月之和 + 当前月的几号)
    // 需求: 年月日输入合法的前提下  判断输入的日期 是该年的第多少天?

    // 2021-3-1   => 31 + (28|29) + 1
    // 2021-8-9   => 31 + (28|29) + 31 + 30 + 31 + 30 + 31 + 9 

    // !!!!!!!!!!!!!!!!!!!! 从输入框中取的值 是字符串类型

</script>
<script>
    // 1. 获取元素
    var yearInp = document.getElementById("year");
    var monthInp = document.getElementById("month");
    var dayInp = document.getElementById("day");
    var btn = document.getElementById("btn");
    var resultInp = document.getElementById("result");

    console.log(yearInp, month, dayInp, btn, resultInp);

    //  此处代码在页面加载时执行 => 页面加载时 输入框还没有内容  => 取值为 "" 
    // var year = yearInp.value;
    // var month = monthInp.value;
    // var day = dayInp.value;
    // console.log(year,month,day);

    // 2. 绑定事件
    btn.onclick = function () {
        // debugger;
        //  3. 点击时  取值判断  => 取值字符串
        var year = yearInp.value;
        var month = monthInp.value * 1;
        var day = dayInp.value * 1;
        console.log(year, month, day);

        // 提前判断  该年的2月有多少天
        var febDay = year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ? 29 : 28;

        /*  var sum = 0;
         switch (month) {
             case 12:
                 sum = 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + 30 + day;
                 break;
             case 11:
                 sum = 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + day;
                 break;
             case 10:
                 sum = 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + 30 + day;
                 break;
             case 9:
                 sum = 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + day;
                 break;
             case 8:
                 sum = 31 + febDay + 31 + 30 + 31 + 30 + 31 + day;
                 break;
             case 7:
                 sum = 31 + febDay + 31 + 30 + 31 + 30 + day;
                 break;
             case 6:
                 sum = 31 + febDay + 31 + 30 + 31 + day;
                 break;
             case 5:
                 sum = 31 + febDay + 31 + 30 + day;
                 break;
             case 4:
                 sum = 31 + febDay + 31 + day;
                 break;
             case 3:
                 sum = 31 + febDay + day;
                 break;
             case 2:
                 sum = 31 + day;
                 break;
             case 1:
                 sum = day;
                 break;
         }
  */

        /* var sum = 0;
        switch (month) {  // 2021-8-31
            case 12:
                // sum = 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + 30 + day;
                sum += 30;  // 11月的30天
            case 11:
                // sum += 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + day;
                sum += 31;  // 10月31天
            case 10:
                // sum += 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + 30 + day;
                sum += 30;   // 9月的30天
            case 9:
                // sum += 31 + febDay + 31 + 30 + 31 + 30 + 31 + 31 + day;
                sum += 31;  // 8月的31天
            case 8:
                // sum += 31 + febDay + 31 + 30 + 31 + 30 + 31 + day;
                sum += 31;  // 7月的31天
            case 7:
                // sum = 31 + febDay + 31 + 30 + 31 + 30 + day;
                sum += 30; // 6月的30天
            case 6:
                // sum += 31 + febDay + 31 + 30 + 31 + day;
                sum += 31;  // 5月的31天
            case 5:
                // sum += 31 + febDay + 31 + 30 + day;
                sum += 30; // 4月的30天
            case 4:
                // sum += 31 + febDay + 31 + day;
                sum += 31; // 3月的31天
            case 3:
                // sum += 31 + febDay + day;
                sum += febDay; // 2月的febDay天;
            case 2:
                // sum += 31 + day;
                sum += 31;  // 1月的31天
            case 1:
                sum += day;  // 当前月
                break;
        } */


          var sum = 0;
        switch (month) {  // 2021-8-31
            case 12:
                sum += 30;  // 11月的30天
            case 11:
                sum += 31;  // 10月31天
            case 10:
                sum += 30;   // 9月的30天
            case 9:
                sum += 31;  // 8月的31天
            case 8:
                sum += 31;  // 7月的31天
            case 7:
                sum += 30; // 6月的30天
            case 6:
                sum += 31;  // 5月的31天
            case 5:
                sum += 30; // 4月的30天
            case 4:
                sum += 31; // 3月的31天
            case 3:
                sum += febDay; // 2月的febDay天;
            case 2:
                sum += 31;  // 1月的31天
            case 1:
                sum += day;  // 当前月
                break;
        }
        resultInp.value = sum;


    }



</script>

</html>